<template>
  <div class="contents">
    <PanelTitle title="农事分析" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import { useBaseStore } from "@/stores/base";
const baseStore = useBaseStore()
const maps = ref(null);
onMounted(async () => {
  var myChart = echarts.init(maps.value);
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/plant/task/done/statist/list",
    method: "get",
    params: {
      baseId: baseStore.base.id 
      // baseId: 4
    },
  });
  

  let yData = res.data.map((item) => {
    return item.leader;
  });
  let doneTaskNum = res.data.map((item) => {
    return item.doneTaskNum;
  });

  let noDoneTaskNum = res.data.map((item) => {
    return item.taskNum - item.doneTaskNum
  });

  myChart.setOption({
    grid: {
      left: "3%",
      right: "10%",
      bottom: "12%",
      top: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [
        {
          name: "未完成",
          // itemStyle: {
          //   color: "#F85640",
          // },
        },
        {
          name: "已完成",
          // itemStyle: {
          //   color: "#FBA640",
          // },
        },
      ],
      bottom: 0,
      icon: "circle",
      itemHeight: fitChartSize(5),
      itemWidth: fitChartSize(5),
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: fitChartSize(9),
      },
    },
    title: {
      text: "单位：吨",
      textStyle: {
        color: "#fff",
        fontWeight: 500,
        fontSize: fitChartSize(9),
      },
      right: fitChartSize(10),
    },
    xAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            // type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
        min: 0,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        data: yData,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "未完成",
        type: "bar",
        stack: "total",
        barWidth: fitChartSize(24),
        // showBackground: true,
        // backgroundStyle: {
        //   color: "rgba(10, 42, 53, 0.38)",
        // },
        // itemStyle: {
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //       {
        //         offset: 0,
        //         color: "rgba(75, 21, 13, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(248, 86, 64, 1)",
        //       },
        //     ]),
        //   },
        // },
        data: noDoneTaskNum,
      },
      {
     
        name: "已完成",
        type: "bar",
        // barGap: "-100%",
        stack: "total",
        barWidth: fitChartSize(24),
        // showBackground: true,
        // backgroundStyle: {
        //   color: "rgba(10, 42, 53, 0.38)",
        // },
        // itemStyle: {
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //       {
        //         offset: 0,
        //         color: "rgba(129, 27, 0, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(251, 166, 64, 1)",
        //       },
        //     ]),
        //   },
        // },
        data: doneTaskNum,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
  }
}

.maps {
  height: vh(190);
  width: 100%;
}
</style>